<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ include file="validausuario.jsp"%>
<%@ page import="mobility.*" %>
<%@ page import="java.sql.*" %>
<%
	String perfil = (String)session.getAttribute("perfil");
	if (!perfil.equals("Admin")) {
		response.sendRedirect("accesodenegado.jsp");
		return;
	}
%>
<html>
<head>
<title>Ver Ruta</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="main.css">
<script src="js/jquery-1.3.2.js"></script>
<link rel="Shortcut Icon" href="icono_tm.ico" type="image/x-icon" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { width: 70%; height: 100%; margin-left:5px;margin-top: 5px; float: left }
  #info { width: 20%; height: 100%; margin-left:5px;margin-top: 5px; float: left }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
<script type="text/javascript">
var map;
var geocoder;
function initialize() {
	geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(6.708254,-72.861328);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    
}

function VerInfo(recurso) {
	var url= "InfoRecurso.jsp?recurso=" + recurso;
	window.open(url , "ShowInfoRecurso" , "width=400,height=300,scrollbars=YES,menubar=No,toolbar=NO,status=YES"); 
}

function MostrarUbicacion() {
    var markers = [];
    var info = [];
    var infowindow = new google.maps.InfoWindow({
        content: ''
    });
	var url = "XmlUbicacionRecurso";
	var i=1;
	$.get(url, function (xml) {
	    $(xml).find("coordenada").each(function () {
	    	var latitud = $(this).find("latitud").text();
	       	var longitud = $(this).find("longitud").text();
	       	var nombre = $(this).find("nombre").text();
	       	var cedula = $(this).find("cedula").text();
	       	var fecha = $(this).find("fecha").text();
	       	//var direccion = "";
	       	var icono = "images/car.png"; 
	       	latitud = latitud.replace(',','.');
	       	longitud = longitud.replace(',','.');
	       	posicion = new google.maps.LatLng(parseFloat(latitud),parseFloat(longitud));
	       	var marker = new google.maps.Marker({ //opciones
	            position: posicion ,
	            map:map,
	            icon: icono
	       	});

	       	/*
	       	geocoder.geocode({'latLng': posicion}, function(results, status) {
	            if (status == google.maps.GeocoderStatus.OK) {
	              if (results[1]) {
	                direccion = results[1].formatted_address;
	              }
	            } else {
	              direccion = "Geocoder failed due to: " + status;
	            }
	          });
	       	*/
	       	var contenido ="Tecnico: <STRONG>" + nombre + "</STRONG><br/>Ultimo reporte: " + fecha + "<br/>Posicion (X,Y): " + latitud + "," + longitud + "<br/><a href=\"javascript:VerInfo('" + cedula + "')\">Ver informacion recurso</a>";
	        markers.push(marker);
	        info.push(contenido);
			
	        if (i==1) {
				map.setCenter(posicion);
				map.setZoom(13);
				
			}
			i++;
	    });
	    //var markerclusterer = new MarkerClusterer(map, markers);	    
	    for (var x = 0, j = info.length; x < j; x++) {
	        var contenido = info[x];
	        var marker = markers[x];
	        (function(marker, contenido){                       
	            google.maps.event.addListener(marker, 'click', function() {
	                infowindow.setContent(contenido);
	                infowindow.open(map, marker);
	            });
	        })(marker,contenido);
	    }
	});

}
</script>
</head>
<body onload="initialize()">
<%@ include file="header.jsp" %>
<div id="info">
<h2>Ubicación Recurso</h2>
<form>
	<table>
		<tr>
			<th colspan="2">Informacion</th>
		</tr>
		<tr>
			<td>Fecha</td>
			<td><%= Utilidades.getTimeServer() %></td>
		</tr>
		<tr>
			<td colspan="2"><input type="button" value="Consultar ubicacion" onclick="javascript:MostrarUbicacion()" /></td>
		</tr>
	</table>
</form>
</div>
<div id="map_canvas"></div>

</body>
</html>
